<template>
    <section>
        <div class="order-container">
            <div class="header">
                <h4>所有订单</h4>
            </div>
            <div class="order-con">
                <el-tabs v-model="activeTab" @tab-click="handleClick">
                    <!--0 已完成 1 待付款 2 待发货 3 已发货 4 退款中 5 已关闭 6 全部-->
                    <el-tab-pane label="全部" name="6"></el-tab-pane>
                    <el-tab-pane label="待付款" name="1"></el-tab-pane>
                    <el-tab-pane label="待发货" name="2"></el-tab-pane>
                    <el-tab-pane label="已发货" name="3"></el-tab-pane>
                    <el-tab-pane label="已完成" name="0"></el-tab-pane>
                    <el-tab-pane label="已关闭" name="5"></el-tab-pane>
                    <el-tab-pane label="退款中" name="4"></el-tab-pane>
                </el-tabs>
                <div class="order-con__title flex-box">
                    <el-input v-model="orderName" placeholder="订单号/商品名/微信昵称/下单用户" style="width:300px;"></el-input>
                    <el-date-picker
                            v-model="orderTime"
                            type="datetime"
                            style="min-width:150px;"
                            placeholder="订单创建日期">
                    </el-date-picker>
                    <el-button type="primary" @click="searchItem" icon="el-icon-search"></el-button>
                    <el-button type="primary" @click="outItem">批量导出</el-button>
                </div>
                <div class="table-box">
                    <el-table :data="orderList" v-loading="tableLoading" style="width: 100%">
                        <el-table-column :resizable="false" label="商品图">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" style="width: 60px;height:60px;" v-if="scope.row.image"/>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="商品信息">
                            <template slot-scope="scope">
                                <div>
                                    <p class="text-primary">{{scope.row.name}}</p>
                                    <p>{{scope.row.desc}}</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="订单号">
                            <template slot-scope="scope">
                                <span>{{scope.row.sn}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="下单用户">
                            <template slot-scope="scope">
                                <p>下单用户：{{scope.row.username}}</p>
                                <p>微信昵称：{{scope.row.wx_name}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="单价/数量">
                            <template slot-scope="scope">
                                <span>¥ {{scope.row.unit_price}}<br>
                                    {{scope.row.goods_number}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="运费">
                            <template slot-scope="scope">
                                <span>¥ {{scope.row.carriage}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="优惠金额">
                            <template slot-scope="scope">
                                <span>¥ {{scope.row.discount_price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="实付金额">
                            <template slot-scope="scope">
                                <span>¥ {{scope.row.calculate_pay_price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="下单时间" prop="pay_at" sortable>
                        </el-table-column>
                        <el-table-column :resizable="false" label="状态">
                            <template slot-scope="scope">
                                <!--0 已完成 1 待付款 2 待发货 3 已发货 4 退款中 5 已关闭 -->
                                <span v-if="scope.row.type === 0">已完成</span>
                                <span v-else-if="scope.row.type === 1">待付款</span>
                                <div v-else-if="scope.row.type === 2">
                                    <span>待发货</span>
                                    <el-button type="info" @click="">发货</el-button>
                                </div>
                                <span v-else-if="scope.row.type === 3">已发货</span>
                                <span v-else-if="scope.row.type === 4" class="text-primary">退款中</span>
                                <span v-else-if="scope.row.type === 5">已关闭</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" prev-text="上一页"
                                   next-text="下一页" :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

        </div>
    </section>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                activeTab: '6',

                orderTime: '',
                orderName: '',

                orderList: [],
                tableLoading: true,

                pageCount: '',
                page: {
                    total: null,
                    count: null
                },
                pageSize: 20,
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getOrderList();
        },
        methods: {
            handleClick() {
                console.log('状态', this.activeTab)
                this.getOrderList();
            },
            searchItem() {
                console.log('分类', this.goodSort, '名称', this.goodName, '属性', this.goodTime)
                axios
                    .get('admin_goods', {
                        params: {
                            name: this.orderName,
                            time: this.orderTime,
                        }
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.orderList = res;
                        this.tableLoading = false;

                    })
            },
            outItem() {
                console.log("批量导出")
            },
            getOrderList(pagination = 1) {
                axios
                    .get('admin_goods', {
                        params: {
                            pagination,
                            pageSize: this.pageSize,
                            type: this.activeTab === 6 ? '' : this.activeTab
                        }
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize);
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.orderList = res;
                        this.tableLoading = false;
                    })
            },
            deleteItem(index, id) {
                this.$confirm('是否确认删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        return axios
                            .post(`admin_goods/${id}`, {_method: 'DELETE'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getOrderList();
                    })
                    .catch(err => {
                        if (err !== 'cancel') {
                            this.$message.error(err);
                        }
                    });
            },
            // genData(data) {
            //     return {
            //         sort: data.sort,
            //         shop_id: data.shop_id,
            //         image: data.image ? data.image.join(',') : '',
            //         is_in_list: data.is_in_list,
            //         name: data.name,
            //     };
            // },
            // postData() {
            //     return axios
            //         .post('https://www.easy-mock.com/mock/5aea77509d0dc53dc5af4c1d/dspt/api/admin_goods', {
            //             params: {
            //                 pagination,
            //                 pageSize: this.pageSize,
            //                 type: this.activeTab === 8 ? '' :this.activeTab
            //             }
            //         })
            //         .then(res => {
            //             return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
            //         });
            // },
            handleCurrentChange(current) {
                this.getOrderList(current);
            }
        }
    }
</script>
<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .order-con__title {
        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }

</style>
<style>

</style>